<template>
  <div class="error-page-container">
    <el-card class="error-card">
      <div class="error-visual">
        <el-icon class="error-icon" :size="80">
          <template v-if="errorCode === '404'">
            <QuestionFilled />
          </template>
          <template v-else-if="errorCode === '500'">
            <CircleClose />
          </template>
          <template v-else>
            <WarningFilled />
          </template>
        </el-icon>
      </div>

      <div class="error-content">
        <h1 class="error-code">{{ errorCode }}</h1>

        <p class="error-description">{{ errorDescription }}</p>

        <div class="button-group">
          <el-button type="primary" @click="goHome" class="go-home-button">
            返回首页
          </el-button>
          <el-button v-if="errorCode === '500'" @click="refreshPage" class="refresh-button">
            刷新页面
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { WarningFilled, QuestionFilled, CircleClose } from '@element-plus/icons-vue';

const props = defineProps({
  errorCode: {
    type: String,
    default: '404'
  },
  errorDescription: {
    type: String,
    default: '抱歉，您访问的页面不存在。'
  }
});

const router = useRouter();

const goHome = () => {
  router.push('/');
};

const refreshPage = () => {
  window.location.reload();
};
</script>

<style lang="scss" scoped>
/* 定义一些常用颜色变量，与您的主题色保持一致 */
$primary-blue: #409eff; // Element Plus 主题蓝
$dark-blue: #2a7cff; // 更深的蓝色，用于渐变或阴影
$light-blue: #e6f7ff; // 浅蓝色，用于背景或点缀
$purple-gradient-start: #6a85b6; // 您的应用中可能出现的紫色系渐变色
$purple-gradient-end: #a5c3e7; // 您的应用中可能出现的紫色系渐变色
$text-dark: #303133;
$text-light: #606266;
$bg-light-gray: #f7f9fc; // 比 #f0f2f5 更浅更柔和的背景

.error-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* 确保占据整个视口高度，美观 */
  background: linear-gradient(135deg, $bg-light-gray 0%, #ebf0f7 100%);
  /* 渐变背景 */
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  /* 防止溢出 */

  // 可以添加一些抽象的背景装饰，例如伪元素
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(80px);
    z-index: 0;
  }

  &::before {
    width: 250px;
    height: 250px;
    background-color: $primary-blue;
    top: 10%;
    left: 5%;
  }

  &::after {
    width: 300px;
    height: 300px;
    background-color: $purple-gradient-start;
    bottom: 8%;
    right: 7%;
  }
}

.error-card {
  position: relative;
  /* 确保卡片在背景之上 */
  z-index: 1;
  width: 100%;
  max-width: 680px;
  /* 稍微宽一点，提供更多空间 */
  text-align: center;
  padding: 60px 40px;
  /* 增加内边距，提供呼吸感 */
  border-radius: 20px;
  /* 更大的圆角 */
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  /* 更明显的阴影效果 */
  overflow: hidden;
  /* 防止内部元素溢出圆角 */

  // 添加卡片内部的抽象图案或渐变边框
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    /* 顶部细边 */
    background: linear-gradient(90deg, $primary-blue, $purple-gradient-start);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.error-visual {
  margin-bottom: 30px;
  position: relative;
  display: inline-flex; // 让其内容居中

  .error-icon {
    font-size: 100px;
    /* 更大的图标 */
    color: $primary-blue;
    /* 主题蓝 */
    transition: transform 0.3s ease;
    /* 增加一点动画效果 */

    // 根据图标类型调整颜色
    &.el-icon-warning-filled {
      color: #e6a23c;
    }

    /* 警告黄 */
    &.el-icon-circle-close {
      color: #f56c6c;
    }

    /* 错误红 */
    &.el-icon-question-filled {
      color: #909399;
    }

    /* 疑问灰，更柔和 */
  }

  // 可以在图标周围添加一个光晕效果
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background-color: $primary-blue;
    opacity: 0.1;
    border-radius: 50%;
    filter: blur(30px);
    z-index: -1;
  }
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-code {
  font-size: 6em;
  /* 稍微调整，保持冲击力但不失优雅 */
  font-weight: 700;
  /* 更粗的字体 */
  color: $text-dark;
  margin-bottom: 15px;
  letter-spacing: -2px;
  /* 增加一点字间距，更现代 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  /* 细微的文字阴影 */
}

.error-description {
  font-size: 1.3em;
  /* 略大一点的描述文字 */
  color: $text-light;
  margin-bottom: 40px;
  /* 增加与按钮的距离 */
  line-height: 1.8;
  /* 更舒适的行高 */
  max-width: 80%;
  /* 限制描述文字宽度，避免过长 */
}

.button-group {
  display: flex;
  gap: 20px;
  /* 按钮之间的间距 */
}

.go-home-button,
.refresh-button {
  padding: 14px 35px;
  /* 调整按钮大小 */
  border-radius: 10px;
  /* 更大的按钮圆角 */
  font-size: 1.1em;
  font-weight: 600;
  transition: all 0.3s ease;
  /* 更好的过渡效果 */

  &:hover {
    transform: translateY(-3px);
    /* 悬停上浮效果 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }

  &.el-button--primary {
    background: linear-gradient(90deg, $primary-blue, $dark-blue);
    /* 渐变背景 */
    border: none;

    &:hover {
      background: linear-gradient(90deg, darken($primary-blue, 5%), darken($dark-blue, 5%));
    }
  }
}

/* 媒体查询，适应小屏幕 */
@media (max-width: 768px) {
  .error-card {
    padding: 30px 20px;
    border-radius: 15px;
  }

  .error-code {
    font-size: 4em;
  }

  .error-icon {
    font-size: 70px;
  }

  .error-description {
    font-size: 1em;
  }

  .go-home-button,
  .refresh-button {
    padding: 10px 25px;
    font-size: 1em;
  }

  .button-group {
    flex-direction: column;
    /* 按钮在小屏幕上垂直堆叠 */
    gap: 15px;
  }
}
</style>